<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作用域插槽</title>
</head>
<body>
    <div id="app">
        <App> </App>
    </div>
    <script src="vue.js"></script>
    <script>
        const todoList={
            data(){
                return{

                }
            },
            props:{
                todos:Array,
                defaultValue:[]
            },
            template:`
                <ul>
                    <li v-for='item in todos' :key='item.id'>
                        <slot :itemValue='item'></slot>
                        {{item.title}}
                    </li>
                </ul>
            `
        }

        const App={
            data(){
                return{
                    todoList:[{
                        title:'大哥你好吗',
                        isComplate:true,
                        id:1
                    },
                    {
                        title:'小弟我还行',
                        isComplate:false,
                        id:2
                    },
                    {
                        title:'你在干什么',
                        isComplate:false,
                        id:3
                    },
                    {
                        title:'抽烟喝酒还烫头',
                        isComplate:true,
                        id:4
                    }]
                }
            },
            components:{
                todoList
            },
            template:`
                <todoList :todos='todoList'>
                    <template v-slot='data'>
                        <input type="checkbox" v-model='data.itemValue.isComplate'/>
                    </template>
                </todoList>
            `
        }
        new Vue({
            el:'#app',
            data:{
                
            },
            components:{
                App
            }
        })
    </script>
</body>
</html>